<template>
	<div>
		<el-table stripe :height="list.length > 3 ? 500 : ''" :data="list" v-loading="listLoading" element-loading-text="加载中..." border fit highlight-current-row style="width: 100%">
			<el-table-column type="index" width="40" align="center"></el-table-column>
			<el-table-column label="标题" align="center" min-width="200">
		        <template slot-scope="scope">
		          	<el-button class="preview-button" type="text" @click="showInfo(scope.row)">{{ scope.row.title }}</el-button>
		        </template>
			</el-table-column>
			<el-table-column prop="summary" label="摘要" align="center" min-width="300"></el-table-column>
			<el-table-column prop="createTime" label="创建时间" align="center" width="100"></el-table-column>
			<el-table-column prop="updateTime" label="更新时间" align="center" width="100"></el-table-column>
			<el-table-column prop="source" label="来源" align="center"></el-table-column>
			<el-table-column label="态度" align="center" width="65">
	        	<template slot-scope="scope">
	        		<span v-if="scope.row.attitude == -1" class="tagColor" style="background-color: #4cba2a;">&nbsp;利空&nbsp;</span>
	        		<span v-else-if="scope.row.attitude == 0" class="tagColor" style="background-color: #c5d106;">&nbsp;中性&nbsp;</span>
	        		<span v-else="scope.row.attitude == 1" class="tagColor" style="background-color: red;">&nbsp;利好&nbsp;</span>
		        </template>
	    	</el-table-column>
	      	<el-table-column v-if='tarMsg.deleteBtn && !tarMsg.readonly' align="center" label="操作" width="150" class-name="small-padding fixed-width">
		        <template slot-scope="scope">
		          	<el-button style="width: auto" type="danger" size="mini" @click.native.prevent="deleteRow(scope.row)">移除</el-button>
		        </template>
	      	</el-table-column>
		</el-table>
		<div class="pagination-container" style="margin-top: 10px;">
			<el-pagination 
				background 
				@size-change="handleSizeChange" 
				@current-change="handleCurrentChange" 
				:current-page.sync="listQuery.pageNum" 
				:page-sizes="[10, 20, 30, 50]" 
				:page-size="listQuery.pageSize" 
				layout="total, sizes, prev, pager, next, jumper" 
				:total="total">
			</el-pagination>
		</div>
		<el-dialog append-to-body :fullscreen='true' title="资讯详情" :visible.sync="dialogInfo">
			<div v-if='dialogInfo'>
				<infoPreview :infoMsg='infoMsg' @closeFile='closeFile'></infoPreview>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import infoPreview from './infoPreview'
	import { selectByIdNews, selectByScNews, selectByNews, delNews} from '@/api/events'

	export default {
		name: 'newsTable',
		props: ['evtMsg'],
		components: { infoPreview },
		watch: {
			evtMsg(val){
				this.tarMsg = Object.assign({}, this.evtMsg)
				this.chooseFunc(this.tarMsg.apiTar)
			}
		},
		data() {
			return {
				tarMsg: {
	        		apiTar: '',
		        	evtId: '',
		        	deleteBtn: false,
		        	readonly: false
				},
				list: [],
				listLoading: false,
				infoMsg:{},
				dialogInfo:false,
				listQuery: {
					pageNum: 1,
					pageSize: 20,
					eventId: ''
				},
				total: 0
			}
		},
		created() {
			this.tarMsg = Object.assign({}, this.evtMsg)
			this.chooseFunc(this.tarMsg.apiTar)
		},
		methods: {
      		chooseFunc(str) {
	    		switch (str) {
		          case 'selectByIdNews':
		            return this.getList01()
		          case 'selectByScNews':
		            return this.getList02()
		          case 'selectByNews':
		            return this.getList03()
		        }
	      	},
			getList01() {
				this.listLoading = true
				this.listQuery.eventId = this.tarMsg.evtId
				selectByIdNews(this.listQuery).then(res => {
					this.listLoading = false
					this.list = res.Data
					this.total = parseInt(res.total)
				})
			},
			getList02() {
				this.listLoading = true
				this.listQuery.eventId = this.tarMsg.evtId
				selectByScNews(this.listQuery).then(res => {
					this.listLoading = false
					this.list = res.Data
					this.total = parseInt(res.total)
				})
			},
			getList03() {
				this.listLoading = true
				this.listQuery.eventId = this.tarMsg.evtId
				selectByNews(this.listQuery).then(res => {
					this.listLoading = false
					this.list = res.Data
					this.total = parseInt(res.total)
				})
			},
			handleSizeChange(val) {
				this.listQuery.pageSize = val
				this.chooseFunc(this.tarMsg.apiTar)
			},
			handleCurrentChange(val) {
				this.listQuery.pageNum = val
				this.chooseFunc(this.tarMsg.apiTar)
			},
			showInfo(row) {
				this.infoMsg = Object.assign({}, row)
				this.dialogInfo = true
			},
			closeFile() {
				this.dialogInfo = false
			},
			deleteRow(row) {
		        this.$confirm('确认删除, 是否继续?', '提示', {
		         	confirmButtonText: '确定',
		          	cancelButtonText: '取消',
		          	type: 'warning'
		        }).then(() => {
		        	let obj = {
		        		'id': row.id
		        	}
					delNews(obj).then(res => {
						this.chooseFunc(this.tarMsg.apiTar)
						this.$notify({ title: '成功', message: '删除成功', type: 'success', duration: 5000 })
					})
//		        	rows.splice(index, 1);
		        }).catch(() => {
		          	this.$message({ type: 'info', message: '已取消删除' })
		        })
	     	}
		}
	}
</script>

<style scoped>
	.tagColor{
		color: white;
		border-radius: 5px;
	}
</style>